<template>
  <div class="box">
    <el-table :data="tableConfig.tableData" style="width: 100%" height="270px">
      <!-- 动态生成表格列 -->
      <el-table-column
        v-for="column in tableConfig.columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :fixed="column.fixed"
        :width="column.width || 'auto'"
      >
        <!-- 自定义列内容 -->
        <template v-if="column.type === 'sort'" #default="scope">
          <div style="display: flex; align-items: center">
            <el-popover placement="top" :width="200" trigger="click">
              <template #reference>
                <el-button style="margin-right: 16px">{{
                  scope.row[column.prop]
                }}</el-button>
              </template>
              <div class="input">
                <div class="head">
                  第
                  <el-input
                    v-model="input"
                    style="width: 60px"
                    placeholder="N"
                  />
                  个
                </div>
                <div class="btn">
                  <el-button type="primary" @click="popoverBtn">确定</el-button>
                </div>
              </div>
            </el-popover>
          </div>
        </template>
        <template v-else-if="column.type === 'img'" #default="scope">
          <img :src="scope.row[column.prop]" alt="图片封面" />
        </template>
        <template v-else-if="column.type === 'name'" #default="scope">
          {{ scope.row[column.prop] }}
        </template>
        <template v-else-if="column.type === 'create_time'" #default="scope">
          {{ scope.row[column.prop] }}
        </template>
        <template
          v-else-if="column.type === 'viewing_permission'"
          #default="scope"
        >
          {{ scope.row[column.prop] }}
        </template>
        <template v-else-if="column.type === 'type'" #default="scope">
          {{ scope.row[column.prop] }}
        </template>

        <template v-else-if="column.type === 'num'" #default="scope">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="Top Center prompts info"
            placement="top"
          >
            {{ scope.row[column.prop] }}
          </el-tooltip>
        </template>

        <template v-else-if="column.type === 'status'" #default="scope">
          {{ scope.row[column.prop] }}
          <el-switch v-model="value1" />
        </template>

        <template v-else #default="scope">
          {{ scope.row[column.prop] }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';

const emits = defineEmits(['popoverSure']);

const { tableConfig } = defineProps({
  tableConfig: {
    visible: {
      type: Boolean,
      default: false,
    },
    type: Object,
    default: () => ({
      // 总数据量
      total: 0,
      // 当前页码
      page: 1,
      // 每页显示的数据条数
      pageSize: 10,
      // 表格数据
      list: [],
      // 表格表头
      columns: [],
    }),
  },
});
const popoverBtn = () => {
  emits('popoverSure', false);
};
onMounted(() => {});
</script>
<style scoped lang="scss">
.el-button + .el-button {
  margin-left: 8px;
}
.input {
  display: flex;
}
.btn {
  margin-left: 10px;
}
</style>
